<template>
  <div class="memberManage">
    <ProTable ref="ProTableRef" :requestApi="getTableList" :initParam="initParam" :columns="columns">
      <template #tableHeader="_scope">
        <div class="'btn'"></div>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="MemberManage">
import { getMembersApi } from "@/api/modules";
import ProTable from "@/components/ProTable/index.vue";
import { reactive, ref } from "vue";
// import personList from '@/assets'

const ProTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ search: "" });

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  return getMembersApi(params);
};

// 表格配置项
const columns = [
  // { type: "selection", fixed: "left", width: 80 }, //多选框
  { type: "index", label: "序号", width: 80 },
  {
    prop: "first_name",
    label: "会员名",
    render: (scope) => {
      return (
        <>
          {scope.row.first_name == "" || scope.row.first_name == null
            ? "--"
            : scope.row.first_name}
        </>
      );
    },
  },
  {
    prop: "digital_assets",
    label: "通用数字资产",
  },
  {
    prop: "gender",
    label: "性别",
    render: (scope) => {
      return <>{<el-tag type="success">{scope.row.gender}</el-tag>}</>;
    },
  },
  {
    prop: "head_img",
    label: "头像",
    render: (scope) => {
      return (
        <>
          {scope.row.head_img ? (
            <img src="../../" />
          ) : scope.row.gender == "男" ? (
            <img
              src={new URL(`@/assets/images/man_avatar.png`, import.meta.url)}
              style="width: 50px; height: 50px"
            />
          ) : (
            <img
              src={new URL(`@/assets/images/women_avatar.png`, import.meta.url)}
              style="width: 50px; height: 50px"
            />
          )}
        </>
      );
    },
  },
];
</script>

<style scoped lang="scss">
@import "./memberManage.scss";
</style>
